import Note from 'gatsby-theme-mdx/src/components/note'

# Vue

<Note>This guide is a WIP</Note>

If you want to initialize a project to try Vue + MDX you can
[use the Vue example](https://github.com/mdx-js/mdx/tree/master/examples/vue).
You can scaffold out a project with `npm init mdx vue`.

If you want to incorporate MDX into an existing Vue project, keep reading.

## Installation

```sh
yarn add @mdx-js/vue-loader
```

## Configuring webpack

In a [Vue CLI](https://cli.vuejs.org/) you need to add a `webpack.config.js` that
uses the MDX loader for vue:

```js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.mdx?$/,
          use: ['babel-loader', '@mdx-js/vue-loader']
        }
      ]
    }
  }
}
```

That’s it. Now restart your server and you should be able to create `.mdx` files
and import them in other components.
